<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16110100624</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Cache-Control" content="max-age=180">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lunbo.css">
    <script src="js/common.js"></script>
    <script src="js/lunbo.js"></script>

    <style>

    </style>
    <script>
        window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {//判断是屏幕旋转还是resize
            function c() {
                var d = document.documentElement;//获取html元素
                var cw = d.clientWidth || 750;
                d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
            }
            c();
            return c;
        })(), false);
    </script>



</head>
<body>
<!--h5标签,语义化加强。用法和div相同，可以多个存在，在不是id标签的情况下-->
    <!--<header id="header">-->

    <!--</header>-->
    <!--<nav id="nav"></nav>-->
    <!--<div id="slide"></div>-->
    <!--<main id="main"></main>-->
    <!--&lt;!&ndash;section里包含article&ndash;&gt;-->
    <!--<section id="xg"></section>-->
    <!--<aside></aside>-->
    <!--<footer id="footer"></footer>-->
<div id="box1">
    <img src="images/yuyin.png" alt="" class="box1-img">
    <input type="text" id="input1" placeholder="给你推荐Wolves"/>
    <img src="images/playing.png" alt="" class="box1-img" style="margin-left: 0.3em;">
    <div id="box1-below">
        <div class="box1-b-r fl">个性推荐</div>
        <div class="box1-b-r fl">主播电台</div>
    </div>
</div>

<!--<div id="box2">-->
    <div class="container">
        <div class="slide">
            <ul>
                <li>
                    <a href="#"><img src="images/music-1.jpg"></a>
                    <p>玩音乐从这里开始</p>
                </li>
                <li>
                    <a href="#"><img src="images/music-2.jpg"></a>
                    <p>新专辑进入试听</p>
                </li>
                <li>
                    <a href="#"><img src="images/music-3.jpeg"></a>
                    <p>会员中心</p>
                </li>
                <li>
                    <a href="#"><img src="images/music-4.jpg"></a>
                    <p>Music</p>
                </li>
                <li>
                    <a href="#"><img src="images/music-5.jpg"></a>
                    <p>音乐的律动</p>
                </li>
                <!--<li>-->
                    <!--<a href="#"><img src="../image/lian.jpg"></a>-->
                    <!--<p>这里是标题</p>-->
                <!--</li>-->
            </ul>
        </div>

    </div>
<!--</div>-->
<script src="js/lunbo.js"></script>
<div id="box3">
    <div class="fl box3-one">
        <div class="box3-o-1">
            <img src="images/1-FM.png" alt="">
        </div>

        <p><a href="FM.html">私人FM </a></p>
    </div>
    <div class="fl box3-one">
        <div  class="box3-o-1 fl">
            <img src="images/1-calendar.png" alt="">
        </div>

        <p>每日推荐</p>
    </div>
    <div class="fl box3-one">
        <div  class="box3-o-1 fl">
            <img src="images/1-music.png" alt="">
        </div>

        <p>歌单</p>
    </div>
    <div class="fl box3-one">
        <div class="box3-o-1 fl">
            <img src="images/1-list.png" alt="">
        </div>

        <p>排行榜</p>
    </div>
</div>
<div style="clear: both"></div>
<div id="box4">
    <div id="box4-title">
        <span class="fl box4-title">推荐歌单</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist">
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容111111111</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
        <!--<li>-->
            <!--<images src="images/1-list.png" alt="">-->
            <!--&lt;!&ndash;<h3><a href="#">there is a title</a></h3>&ndash;&gt;-->
            <!--<p>随意的内容</p>-->
            <!--&lt;!&ndash;<span class="time">2018-12-8</span>&ndash;&gt;-->
        <!--</li>-->
    </ul>
</div>
<div style="clear: both"></div>
<div id="box5">
    <img src="images/1-disk.png" alt="" id="box5-img" class="fl">
    <div id="box5-title" class="fl">
        <span class="fl box4-title">LOOK直播</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist-1">
        <li>
            <img src="images/pic-7.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/pic-8.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/pic-9.JPG" alt="">
            <p>随意的内容</p>
        </li>
    </ul>
</div>
<div style="clear: both"></div>
<div id="box6">
    <img src="images/1-disk.png" alt="" id="box6-img" class="fl">
    <div id="box6-title" class="fl">
        <span class="fl box4-title">LOOK直播</span>
        <img src="images/right.png" alt="" class="fl box4-img">
    </div>
    <ul class="mlist-1">
        <li>
            <img src="images/two-6.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/two-5.JPG" alt="">
            <p>随意的内容</p>
        </li>
        <li>
            <img src="images/two-4.JPG" alt="">
            <p>随意的内容</p>
        </li>
    </ul>
</div>
<div style="clear: both;"></div>
<footer id="footer">
    <div class="footer-div fl">
        <img src="images/footer-1.png" alt="">
        <p>发现</p>
    </div>
    <div class="footer-div fl">
        <img src="images/footer-2.png" alt="">
        <p>视频</p>
    </div>
    <div class="footer-div fl">
        <a href="me.html">
            <img src="images/footer-3.png" alt="">
        </a>

        <p>我的</p>
    </div>
    <div class="footer-div fl">
        <img src="images/footer-4.png" alt="">
        <p>朋友</p>
    </div>
    <div class="footer-div fl">

        <a href="account.html">
            <img src="images/footer-5.png" alt="">
        </a>

        <p>账号</p>
    </div>
</footer>
<script src="js/index.js"></script>
</body>
</html>